<template>
  <view>
    <!-- 商品列表渲染 -->
    <view class="goods-list">
      <view class="cart-item" v-for="item in cartList" :key="item.goods_id">
        <!-- radio 小程序组件库自带的 -->
        <radio
          @click="changeSelect(item.goods_id)"
          :checked="item.goods_select"
          color="#EB4450"
        />
        <view class="cart-count">
          <u-number-box
            :value="item.goods_count"
            :name="item.goods_id"
            @change="changeCount"
          ></u-number-box>
        </view>
        <!-- hover-class="none" 取消链接组件按下时的灰色样式 -->
        <navigator
          class="goods-item"
          :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`"
          hover-class="none"
        >
          <!-- 商品图片 -->
          <image
            class="goods-image"
            :src="item.goods_small_logo || defaultImage"
            mode="scaleToFill"
          />
          <!-- 商品信息 -->
          <view class="goods-info">
            <view class="goods-name">{{ item.goods_name }}</view>
            <view class="goods-price">{{ item.goods_price }}</view>
          </view>
        </navigator>
      </view>
    </view>
    <!-- 底部操作栏 -->
    <!-- 🚨PS：现在原生组件也支持同层渲染，可以直接给 view 设置层级  -->
    <view class="bottom-bar">
      <view class="select">
        <radio
          class="select-radio"
          :checked="isSelectAll"
          @click="changeSelectAll"
          color="#EB4450"
        />
        <text class="select-text">全选</text>
      </view>
      <!-- 合计 -->
      <view class="total">
        <text class="total-name">合计：</text>
        <text class="total-price">{{ selectCartListPrice }}</text>
      </view>
      <!-- 结算 -->
      <view @click="gotoPay" class="account">
        去结算({{ selectCartListCount }})
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    // state 的购物车列表
    cartList() {
      return this.$store.state.cartList;
    },
    // 需要书写多个 getters 的时候，可以考虑用 mapGetters 化简
    // // getters 的全选
    // isSelectAll() {
    //   return this.$store.getters.isSelectAll
    // },
    // // getters 的总钱数
    // selectCartListPrice() {
    //   return this.$store.getters.selectCartListPrice
    // },
    // // getters 的总件数
    // selectCartListCount() {
    //   return this.$store.getters.selectCartListCount
    // },
    // 通过 mapGetters 辅助函数，同时映射多个数据
    ...mapGetters([
      "isSelectAll",
      "selectCartListPrice",
      "selectCartListCount",
    ]),
  },
  methods: {
    // 单选按钮
    changeSelect(goods_id) {
      // 创建数组副本
      const newList = [...this.cartList];
      // 查找索引
      const index = newList.findIndex((v) => v.goods_id === goods_id);
      // 选中状态取反
      newList[index].goods_select = !newList[index].goods_select;
      // 更新 Vuex 数据
      this.$store.commit("setCartList", newList);
    },
    // 数量步进器
    changeCount(obj) {
      // obj.name     name：步进器标识符， 存储了 goods_id
      // obj.value    value：输入框当前值，用于更新
      // 创建数组副本
      const newList = [...this.cartList];
      // 查找索引
      const index = newList.findIndex((v) => v.goods_id === obj.name);
      // 更新数量
      newList[index].goods_count = obj.value;
      // 更新 Vuex 数据
      this.$store.commit("setCartList", newList);
    },
    // 🎯🎯全选按钮点击，单向数据流 getters 不能通过赋值修改，只能修改其依赖项触发重新计算
    changeSelectAll() {
      // 准备临时变量，存储取反后的值
      const tempSelectAll = !this.isSelectAll;
      // 创建数组副本
      const newList = [...this.cartList];
      // 遍历数组修改所有小选状态
      newList.forEach((item) => {
        item.goods_select = tempSelectAll;
      });
      // 更新 Vuex 的列表数据，列表数据变化了，getters 重新计算出新的选中状态
      this.$store.commit("setCartList", newList);
    },
    // 点击结算按钮，跳转支付页
    gotoPay() {
      // 判断用户是否有选中商品
      if (this.selectCartListCount === 0) {
        uni.showToast({ title: "请选择结算商品~", icon: "none" });
        return;
      }
      // 跳转页面支付页
      uni.navigateTo({ url: "/pages/pay/pay" });
    },
  },
};
</script>

<style lang="scss">
.bottom-bar {
  z-index: 99;
}
.cart-item {
  display: flex;
  align-items: center;
  padding-left: 20rpx;
  border-bottom: 1rpx solid #ddd;
  position: relative;
  .goods-item {
    border-bottom: none;
  }
  // 步进器外层盒子，定位实现
  .cart-count {
    width: 250rpx;
    position: absolute;
    // 细节：扩大盒子范围，防止用户误操作
    padding: 20rpx;
    bottom: 0;
    right: 0;
  }
}
</style>
